<template>
  <div>
    <!-- 年度开工率 -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="260px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    return {
      options: {
        legend: {
          top: "5%",
          itemWidth: 18,
          itemHeight: 18,
        },
        toolbox: {
          show: false,
        },
        tooltip: {},
        series: [
          {
            name: "Nightingale Chart",
            labelLine: { normal: { length: 5 } },
            type: "pie",
            radius: ["30%", "110%"],
            center: ["50%", "35%"],
            // 设置角度
            startAngle: 0,
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              {
                value: 220,
                name: "分类一",
                itemStyle: { normal: { color: "#FC4541" } },
              },
              {
                value: 210,
                name: "分类二",
                itemStyle: { normal: { color: "#F89747" } },
              },
              {
                value: 200,
                name: "分类三",
                itemStyle: { normal: { color: "#ECCD49" } },
              },
              {
                value: 190,
                name: "分类四",
                itemStyle: { normal: { color: "#45D9F5" } },
              },
              {
                value: 180,
                name: "分类五",
                itemStyle: { normal: { color: "#43ABED" } },
              },
              {
                value: 160,
                name: "分类六",
                itemStyle: { normal: { color: "#4473EF" } },
              },
              {
                value: 150,
                name: "分类七",
                itemStyle: { normal: { color: "#4D42EF" } },
              },
              {
                value: 100,
                name: "分类八",
                itemStyle: { normal: { color: "#A442E7" } },
              },
              // 最重要的是下面这里
              { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
              { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
              { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
              { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
              { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
              { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
              { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
              { value: 0, itemStyle: { normal: { color: "rgba(0,0,0,0)" } } },
            ],
          },
        ],
      },
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  // watch: {
  //   cdata: {
  //     handler (newData) {
  //       this.options = {
  //         tooltip: {
  //           trigger: "axis",
  //           backgroundColor: "rgba(255,255,255,0.1)",
  //           axisPointer: {
  //             type: "shadow",
  //             label: {
  //               show: true,
  //               backgroundColor: "#7B7DDC"
  //             }
  //           }
  //         },
  //         legend: {
  //           data: ["已贯通", "计划贯通", "贯通率"],
  //           textStyle: {
  //             color: "#B4B4B4"
  //           },
  //           top: "0%"
  //         },
  //         grid: {
  //           x: "8%",
  //           width: "88%",
  //           y: "4%"
  //         },
  //         xAxis: {
  //           data: newData.category,
  //           axisLine: {
  //             lineStyle: {
  //               color: "#B4B4B4"
  //             }
  //           },
  //           axisTick: {
  //             show: false
  //           }
  //         },
  //         yAxis: [
  //           {
  //             splitLine: { show: false },
  //             axisLine: {
  //               lineStyle: {
  //                 color: "#B4B4B4"
  //               }
  //             },

  //             axisLabel: {
  //               formatter: "{value} "
  //             }
  //           },
  //           {
  //             splitLine: { show: false },
  //             axisLine: {
  //               lineStyle: {
  //                 color: "#B4B4B4"
  //               }
  //             },
  //             axisLabel: {
  //               formatter: "{value} "
  //             }
  //           }
  //         ],
  //         series: [
  //           {
  //             name: "贯通率",
  //             type: "line",
  //             smooth: true,
  //             showAllSymbol: true,
  //             symbol: "emptyCircle",
  //             symbolSize: 8,
  //             yAxisIndex: 1,
  //             itemStyle: {
  //               normal: {
  //                 color: "#F02FC2"
  //               }
  //             },
  //             data: newData.rateData
  //           },
  //           {
  //             name: "已贯通",
  //             type: "bar",
  //             barWidth: 10,
  //             itemStyle: {
  //               normal: {
  //                 barBorderRadius: 5,
  //                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //                   { offset: 0, color: "#956FD4" },
  //                   { offset: 1, color: "#3EACE5" }
  //                 ])
  //               }
  //             },
  //             data: newData.barData
  //           },
  //           {
  //             name: "计划贯通",
  //             type: "bar",
  //             barGap: "-100%",
  //             barWidth: 10,
  //             itemStyle: {
  //               normal: {
  //                 barBorderRadius: 5,
  //                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //                   { offset: 0, color: "rgba(156,107,211,0.8)" },
  //                   { offset: 0.2, color: "rgba(156,107,211,0.5)" },
  //                   { offset: 1, color: "rgba(156,107,211,0.2)" }
  //                 ])
  //               }
  //             },
  //             z: -12,
  //             data: newData.lineData
  //           }
  //         ]
  //       }
  //     },
  //     immediate: true,
  //     deep: true
  //   },
  // },
};
</script>
